<template>
  <div>
    <a-card :bordered="false">
      <div class="table-operator">
        <a-button type="primary" icon="plus" @click="() => { this.formVisible = true }">新建</a-button>
      </div>

      <s-table
        ref="table"
        size="default"
        rowKey="id"
        :columns="columns"
        :scroll="{ x: 1300 }"
        :data="loadData"
        showPagination="auto"
      >
        <span slot="pic" slot-scope="text, record">
          <img width="100" :src="record.attachments.hasOwnProperty(0) ? record.attachments[0].url : ''"/>
        </span>

        <span slot="action" slot-scope="text, record">
          <template>
            <a @click="handleEdit(record)">编辑</a>

            <span v-if="record.agents_count === 0">
              <a-divider type="vertical"/>

              <a-popconfirm placement="top" @confirm="confirmDelete(record)">
                <template slot="title">
                  确定要删除吗?
                </template>
                <a>删除</a>
              </a-popconfirm>
            </span>
          </template>
        </span>
      </s-table>
    </a-card>

    <a-modal
      :title="formTitle"
      :visible="formVisible"
      :confirm-loading="formConfirmLoading"
      @ok="formHandleOk"
      @cancel="formHandleDone"
    >
      <a-form ref="form" :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <a-form-item label="标签名称">
          <a-input
            placeholder="请输入标签名称"
            :maxLength="10"
            v-decorator="['name', { rules: [{ required: true, message: '请输入标签名称' }] }]"
          />
        </a-form-item>
      </a-form>

    </a-modal>
  </div>
</template>

<script>
  import { STable } from '@/components'
  import { deleteAgentLabel, getAgentLabelList, saveAgentLabel } from '@/api/agent'

  export default {
    name: 'List',
    components: {
      STable
    },
    computed: {
      formTitle () {
        return (this.editingLabelId === '' ? '创建' : '编辑') + '商品标签'
      }
    },
    data () {
      return {
        formVisible: false,
        formConfirmLoading: false,
        form: this.$form.createForm(this),
        mdl: {},
        // 查询参数
        queryParam: {},
        // 表头
        columns: [
          {
            title: '序号',
            dataIndex: 'id'
          },
          {
            title: '标签名称',
            dataIndex: 'name'
          },
          {
            title: '已关联代理数',
            dataIndex: 'agents_count'
          },
          {
            title: '更新时间',
            dataIndex: 'updated_at'
          },
          {
            title: '操作',
            dataIndex: 'action',
            width: '150px',
            scopedSlots: { customRender: 'action' }
          }
        ],
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          return getAgentLabelList(Object.assign(parameter, this.queryParam)).then(res => {
            return res
          })
        },
        selectedRowKeys: [],
        selectedRows: [],
        editingLabelId: ''
      }
    },
    methods: {
      handleEdit (record) {
        this.formVisible = true
        this.editingLabelId = record.id

        this.$nextTick(_ => {
          this.form.setFieldsValue({
            name: record.name
          })
        })
      },
      confirmDelete (record) {
        deleteAgentLabel(record.id).then(() => this.refreshList())
      },
      refreshList () {
        this.$refs.table.refresh()
      },
      formHandleOk () {
        this.formConfirmLoading = true
        this.form.validateFields((err, values) => {
          if (!err) {
            if (this.editingLabelId !== '') {
              values.id = this.editingLabelId
            }
            saveAgentLabel(values).then(res => {
              this.formVisible = false
              this.refreshList()
            }).finally(_ => {
              this.formConfirmLoading = false
              this.formHandleDone()
            })
          } else {
            this.formConfirmLoading = false
          }
        })
      },
      formHandleDone () {
        this.formVisible = false
        this.form.resetFields()
        this.editingLabelId = ''
      }
    }
  }
</script>
